<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box{
        width: 400px;
        margin: 0 auto;
    }
    .banner{
        width: 300px;
        background: linear-gradient(150deg,#f4f4f4,#B7FAF7);
    }
    .banner h3{
        height: 30px;
        line-height: 30px;
        color: #FFFFFF;
        background: linear-gradient(to bottom,#1573B3,#ABD4F1);
        text-indent: 2em;
    }
    ul li{
        list-style: none;
        font-family: 宋体;
        font-size: 14px;
    }
    ul h5{
        height:25px;
        line-height: 25px ;
        background:linear-gradient(to bottom,#D9ECF9,#83BFED,#D9ECF9) ;
        font-size: 10px;
        color: #2976C9;
        text-indent: 40px;
    }
</style>
<body>
<div class="box">
    <a href="index.html">作业一</a>
    <a href="demo.html">作业二</a>
    <a href="new.html">作业三</a>
    <div class="banner">
        <h3>家用电器</h3>
        <ul> <h5>大家电</h5>
            <li>
                平板电视  洗衣机  冰箱 <br>
                空调  烟机/灶具  热水器 <br>
                冷柜/酒柜  消毒柜  家庭影院 <br>
            </li>
        </ul>
        <ul> <h5>生活电器</h5>
            <li>
                电风扇  净化器  吸尘器 <br>
                净水设备  挂烫机  电话机<br>
            </li>
        </ul>
        <ul> <h5>厨房电器</h5>
            <li>
                榨汁机  电压力锅  电饭煲 <br>
                豆浆机  微波炉  电磁炉<br>
            </li>
        </ul>
        <ul> <h5>五金家装</h5>
            <li>
                淋浴/水槽  电动工具  手动工具 <br>
                仪器仪表  浴霸/排气  灯具<br>
            </li>
        </ul>
    </div>
</div>
</body>
</html>